<template>
  <view class="table">
    <view class="tr">
      <view class="th" v-for="item in columns" :key="item.key">
        {{ item.label }}
      </view>
    </view>

    <view class="table-row" v-for="(row, i) in tableData" :key="i">
      <view class="tr">
        <view v-for="column in columns" :key="column.key" class="td">
          {{ row[column.key] }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'myTable',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },

    tableData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  // margin-top: 20upx;
  width: 100%;
  border: 1upx solid #e6e6e6;

  .tr {
    display: flex;
    text-align: center;

    .th {
      padding: 18upx 5upx;
      width: 30%;
      color: #999999;
      border-bottom: 1upx solid #e6e6e6;
    }

    .td {
      padding: 18upx 5upx;
      width: 30%;
      background: #f8fbff;
    }

    > view:first-child {
      width: 40%;
      border-left: 0.5px solid #e6e6e6;
    }
  }
}
</style>
